Flutter高阶用法之仿写bibili

您所在的位置：网站首页 › flutter 常用库 › Flutter高阶用法之仿写bibili

Flutter高阶用法之仿写bibili

2023-01-22 10:36| 来源: 网络整理| 查看: 265

项目框架及架构 image.png 技术栈： 1.必备技能自定义组件布局技巧扁平化布局调试技巧沉浸式状态栏自定义主题 Dark Mode 依赖冲突构建&打包

Flutter集成与打包Android应用 Flutter集成与打包iOS应用

2.核心原理 Flutter路由原理剖析 Flutter渲染原理剖析 Flutter图片加载与缓存原理剖析组件化原理和方案剖析播放器源码分析 3.网络和存储网络层管理框架请求可配置统一异常和返回处理支持Adapter模式支持拦截器无缝切换http和dio Dao层设计统一缓存管理框架hi_cache 4.路由&导航监听路由页面跳转页面级生命周期实现路由页面栈管理未登录拦截 Android物理返回键兼容处理 schema跳转 tabBar切换监听 5.图片&动画主流图片库对比与选择图片缓存动画必备技能 AnimatedWidget AnimatedBuilder Tween AnimationController Animation Lottie动效高斯模糊登录动效展开动效视觉差滚动动效弹幕播放动效 6.视频技术主流视频播放器分析播放器组件封装自定义播放器UI 播放器交互实现沉浸式播放全屏播放 7.状态管理主流状态管理框架provider、bloc、redux分析 ProxyProvider、MultiProvider、Consumer provider性能优化 8.性能调优

界面帧率优化（帧率提升70%）

image.png

Flutter 性能优化流畅度优化方案

APP包大小瘦身（包大小减少66%）

Flutter包体大小优化

页面秒开内存优化 build()方法优化列表优化方法图片缓存优化 10.稳定性优化异常捕获与上报

Flutter异常捕获

测试之道单元测试 Widget测试集成测试

Flutter测试之道

11.架构技术组件化方案基于可重用的目的，将一个大型App拆分成多个独立的组件或模块。每一个独立的组件都是一个单独的系统，可以单独维护、升级甚至直接替换，也可以依赖于别的独立组件只要组件提供的功能不发生变化，就不会影响其他软件和软件系统的整体功能组件化的中心思想是将独立的功能进行拆分颗粒度拆分原则单一性原则每个组件仅提供一个功能(分而治之，每个组件都有自己固定的职责，专注做一件事) 当你遇到不知道该放哪的代码时，就需要重新思考组件的设计和职责了抽象化原则组件提供的Api应尽量稳定，具有高复用性 (对外暴露的接口很少发生变化，做好功能抽象和接口设计，把所有可能变化的因子都在组件内做好适配，不要暴露给她它的调用方) 稳定性原则不要让稳定的组件依赖不稳定的组件假如：A组件依赖了B组件，如果A组件很稳定，但是B组件经常变化，那么A组件就会跟着B的变化而经常适配从而变得不稳定了自完备性组件要尽可能自给自足，减少对其他底层组件的依赖，达到代码可复用的目的。比如：A组件只是依赖某个大B组件中的某个方法，这是更好的处理方式是：剥离A组件对B组件的依赖，直接把这个方法拷贝到A组件中。组件化实施步骤剥离与业务无关的基础功能网络操作本地缓存第三方库封装考虑到后续的维护适配成本，最好再封装一层，使项目不直接依赖外部代码，方便后续更新或替换如：基于flutter_swiper 封装了hi_banner等 UI组件等将它们封装为独立的基础库后，我们在项目里用pub来管理抽象业务模块登录模块首页模块详情模块排行榜模块等遵循先粗后细，只要能将大体划分清晰的业务组件进行拆分，后续就可以通过分布迭代、局部微调，最终实现整个业务项目的组件化。最小化服务能力根据上面的颗粒度拆分原则修正各个组件下的依赖。以及最小化对外暴露的能力 Flutter网络层框架hi_net架构对于繁杂的业务网络层所面临的挑战切换成本高:第三方库存在不维护切换成本高的风险接口管理不便:大中型APP接口众多，不方便管理重复代码多：网络操作和业务代码耦合严重，不利于扩展开发效率低：不同三方库使用方式不统一，步骤繁琐开发效率低 hi_net架构设计 1.支持网络库插拔设计，且不干扰业务层 2.简单易用，支持配置来进行请求 3.Adapter设计，扩展性强 4.统一异常和返回处理 image.png

统一缓存管理框架hi_cache架构

封装页面框架HiBaseTabState 12.软技能架构思想框架封装和架构搭建的能力优秀框架的封装思路疑难问题解决的方法论 2.快捷键 ①AndroidStudio image.png ②VSCode image.png 补充 Flutter布局嵌套过深导致代码可读性变差，通过代码抽取成多个method或widget减少嵌套层级对第三方插件使用: 使用频率较高时对库进行封装，较少对业务代码无侵入，扩展性好 FractionallySizedBox填满整个宽度 Flexible填充剩余空间抽取工具类，组件化时方便组件下沉将通用的代码提取成通用的类、方法或组件将Tab组件通用代码拆成HiTab组件实现代码的复用对于视频详情页数据处理默认是从上个视频列表传递过来model 数据加载完成后给model重新赋值【用户在列表停留过久时，数据有可能不是最新的】熟悉扁平化布局，減少嵌套地狱实现思路熟悉页面加载优化并能实现页面秒开状态栏样式(前台/后台切换变为白色/黑色) 监听App应用的生命周期变化，做兼容处理 didChangeAppLifecycleState 列表图片的优化：内存缓存本地缓存图片内存缓存

Flutter图片是支持内存缓存的，默认情况下Flutter支持1000张图片缓存到本地，并且这些图片的总计大小不得超过100MB。如果超过那么Flutter会根据LRU算法移除先前缓存的图片。所以我们可以适当调整缓存大小来增加列表图片加载的性能：

PaintingBinding.instance.imageCache.maximumSize= 2000;//最多2000张 PaintingBinding.instance.imageCache.maximunSizeBytes = 200 true; } 列表数量不足时无法下拉刷新和上拉加载更多，怎么处理？ StaggeredGridView.countBuilder( physics: const AlwaysScrollableScrollPhysics() ) HiState处理页面状态异常处理页面状态异常 setState() called after dispose()问题分析【在dispose之后调用setState会触发此问题】 ListView顶部多出间距处理 MediaQuery.removePadding( removeTop: true, context: context, child:ListView() ) 图片渐变加载处理 transparent_image: ^2.0.0-nullsafety.0 解决iOS9/Android无法铭文传输的问题【http链接】 iOS

Info.plist中添加

NSAppTransportSecurity NSAllowsArbitraryLoads Android

AndroidManifest.xml中添加

android:usesCleartextTraffic="true" tools:targetApi="28"

如：

源码地址： https://gitee.com/flutter_steven/flutter_bilibili.git

【本文地址】

Flutter高阶用法之仿写bibili

Flutter高阶用法之仿写bibili

今日新闻

推荐新闻